import {Badge, ConfigProvider, Layout,Menu} from 'antd';
import { Content} from 'antd/es/layout/layout';
import React, { useState } from 'react';
import {Route } from 'react-router-dom';
import System from './SystemMessage';
import Usermsg from './UserMessage';
import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
import UserMessage from './UserMessage'
import SystemMessage from './SystemMessage'

const Message = () => {
    const history = useHistory()
    const [current,setcurrent] =useState('User')
    const handleUser=({key})=>{
        setcurrent(key)
        history.push('/message/user')
    }
    const handleStm=({key})=>{
        setcurrent(key)
        history.push('/message/stm')
    }
    return (
        <ConfigProvider
            theme={{
                token: {
                    // Seed Token，影响范围大
                    colorPrimary: '#73d13d',
                    borderRadius: 20,
                    // 派生变量，影响范围小
                    colorBgContainer: '#f6ffed',
                },
            }}
        >
            <Layout>
            <Content
            style={{
                margin: '20px 16px',
                padding: 10,
                minHeight:'92vh',
                background:'#ffffff',
                borderRadius:20,
                maxHeight:'92vh',
                overflow:'auto',
            }}
            >
                <div style={{
                    display:'flex'
                }}>
                <Menu 
                style={{
                    margin:'auto',
                    minWidth:900,
                    height:40,
                    borderRadius:20,
                    background: '#ffffff',
                }}
                    mode='horizontal'
                    // selectedKeys={current} 
                    >
                    
                    <Menu.Item
                    style={{minWidth:450 ,textAlign:'center'}}
                        key='Usermessage'
                        label='用户消息'
                        onClick={handleUser}
                    >
                        <Badge color='#52c41a' count={3} offset={[20]}>
                        <a>用户消息</a>
                        </Badge>
                    </Menu.Item>
                    
                    <Menu.Item
                    style={{minWidth:450, textAlign:'center'}}
                        key='Systemmessage'
                        label='系统通知'
                        onClick={handleStm}
                    >
                        <Badge offset={[20]}>
                        系统通知
                        </Badge>
                    </Menu.Item>
                 
                </Menu>
                </div>
                <div style={{margin:20}}>
                <Route path='/message/user'>
                    <UserMessage />
                </Route>
                <Route path='/message/stm'>
                    <SystemMessage />
                </Route>
                </div>
                </Content>

                
            </Layout>
        </ConfigProvider>
    )
}

export default Message